<template>
  <div class="board-container">
    <div :style="scaleStyle">
      <div class="board-header">
        <div class="board-line">
          <img :src="hasAlarm ? imgs['lineR'] : imgs['lineG']" />
        </div>
        <div class="board-header-left">
          <div><img :src="imgs['energy']" />&nbsp;&nbsp;能源统计</div>
          <div>安全运行146天</div>
        </div>
        <div class="board-title">智慧能源大屏展示</div>
        <div class="board-header-right">
          <!-- <Space :size="10">
            <img class="large-img __ani" v-if="hasAlarm" :src="imgs['alarm-alarm']" />
            <img class="large-img" v-else :src="imgs['alarm-normal']" />
            <img :src="imgs['time@2x']" />
          </Space> -->
          <div class="board-header-time">
            <Space :size="10">
              <div>{{ date.date }}</div>
              <div>{{ date.day }}</div>
            </Space>
            <div>{{ date.time }}</div>
          </div>
          <div class="board-header-btn">
            <img :src="imgs['quanping-2@2x']" v-if="isFull" title="退出全屏" class="__header-btn" @click="toFull" />
            <img :src="imgs['quanping-2@2x']" v-else title="全屏" class="__header-btn" @click="toFull" />
          </div>
        </div>


      </div>
      <div class="board-content">
        <slot></slot>
      </div>
    </div>

    <a-modal width="550px" :getContainer="getPopupContainer" v-model:open="modalShow" :footer="null">
      <ppt />
    </a-modal>
  </div>

</template>
<script lang="ts" setup>
import { ref, reactive, onUnmounted, defineProps, onMounted } from 'vue';
import * as Icon from '@ant-design/icons-vue';
import { Space } from 'ant-design-vue';
import dayjs from 'dayjs';
import { string } from 'vue-types';
import { useRouter } from 'vue-router';
import ppt from './ppt.vue';
import useObserveResize from './useObserveResize';

//img

const imgs = {
  energy: new URL('./images/b20/energy.png', import.meta.url).href,
  'alarm-alarm': new URL('./images/b20/alarm-alarm.png', import.meta.url).href,
  'alarm-normal': new URL('./images/b20/alarm-normal.png', import.meta.url).href,
  'time@2x': new URL('./images/b20/time@2x.png', import.meta.url).href,
  'quanping-2@2x': new URL('./images/b20/quanping-2@2x.png', import.meta.url).href,
  'lineG': new URL('./images/b20/line-g.png', import.meta.url).href,
  'lineR': new URL('./images/b20/line-r.png', import.meta.url).href,
  'bg@3x': new URL('./images/b20/bg@3x.png', import.meta.url).href,
  'topbg@3x': new URL('./images/b20/top-bg@3x.png', import.meta.url).href,
};
const createImageUrl = () => {
  document.documentElement.style.setProperty('--boardcontainerbg', `url(${imgs['bg@3x']})`);
  document.documentElement.style.setProperty('--boardcontainertopbg', `url(${imgs['topbg@3x']})`);
};
createImageUrl();

const isDev = false;
const hasAlarm = ref<any>(true);

const getScale = () => {
  if (isDev) {
    return {
      width: '1920px',
      height: '1080px'
    }
  }
  const dWidth = 1920;
  if (document.querySelector('.board-container')) {
    const { width, height } = document.querySelector('.board-container')?.getBoundingClientRect() as any;
    const scale = width / dWidth;
    // if (width > 1800) {
    //   return {
    //     width: '100%',
    //     height: '100%'
    //   }
    // }
    return {
      transform: `scale(${scale})`,
      transformOrigin: '0 0',
      width: `${dWidth}px`,
      height: `${(dWidth * height) / width}px`,
    };
  }
  return null;
};

const scaleStyle = ref<any>({
  transform: 'scale(.5, .5)',
  transformOrigin: '0 0',
  width: '1920px',
  height: '1080px',
})
const router = useRouter();
const props = defineProps({
  fullDom: string,
});
const getPopupContainer = () => {
  return document.querySelector('.board-container');
}
const modalShow = ref(false);
const showPpptModal = () => {
  modalShow.value = true;
}
let isFull = ref(false);
const toFull = () => {
  if (isFull.value) {
    document.exitFullscreen();
  } else {
    document.querySelector('.board-container')?.requestFullscreen();
  }
};
const fullscreenchange = () => {
  if (document.fullscreenElement) {
    //全屏
    isFull.value = true;
  } else {
    // 非全屏
    isFull.value = false;
  }
};
const loading = ref(true);
let nowDate = dayjs();
const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
let date = reactive({
  date: `${nowDate.year()}年${nowDate.month()}月${nowDate.date()}日`,
  time: nowDate.format('HH:mm:ss'),
  day: weeks[nowDate.day()],
});
const timeInterVal = setInterval(() => {
  nowDate = dayjs();
  date.date = `${nowDate.year()}年${nowDate.month() + 1}月${nowDate.date()}日`;
  date.time = nowDate.format('HH:mm:ss');
  date.day = weeks[nowDate.day()];
}, 1000);

const resizeHandler = () => {
  const scale = getScale();
  if (scale) {
    scaleStyle.value = scale;
    window.dispatchEvent(new Event('resize'))
  }
};
useObserveResize('.board-container', resizeHandler)
onMounted(() => {
  document.addEventListener('fullscreenchange', fullscreenchange);
  // resizeHandler();
  // window.dispatchEvent(new Event('resize'));
  // window.addEventListener('resize', resizeHandler);
});
onUnmounted(() => {
  clearInterval(timeInterVal);
  // window.removeEventListener('resize', resizeHandler);
});
setTimeout(() => {
  loading.value = false;
}, 1500);
</script>

<style lang="less" scoped>
@keyframes alarm {
  0% {
    opacity: 1;

    /* 完全不透明 */
  }

  50% {
    opacity: 0.3;

    /* 完全透明 */
  }

  100% {
    opacity: 1;

    /* 重新不透明 */
  }
}

.board-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background-image: var(--boardcontainerbg);
  background-size: 100% 100%;

  .board-header {
    display: flex;
    position: relative;
    justify-content: center;
    height: 72px;
    background-image: var(--boardcontainertopbg);
    background-size: 100% 100%;

    .board-line {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;

      img {
        width: 100%;
        height: auto;
      }
    }

    .board-header-left {
      display: flex;
      position: absolute;
      top: 0;
      bottom: 10px;
      left: 0;
      align-items: center;
      padding-left: 20px;

      img {
        position: relative;
        top: -1px;
        width: 24px;
        height: 24px;
      }

      >div:first-child {
        color: #4E8AFF;
        font-size: 16px;
        line-height: 22px;
      }

      >div:last-child {
        margin-left: 55px;
        color: #00FFC3;
        font-size: 22px;
      }
    }

    .board-title {
      display: flex;
      align-items: center;
      height: 50px;
      color: #fff;
      font-size: 28px;
      font-size: 600;
    }

    .board-header-right {
      display: flex;
      position: absolute;
      right: 20px;

      img {
        width: 24px;
        height: 24px;
        margin-top: 7px;
        cursor: pointer;

        &.large-img {
          position: relative;
          top: 2px;
          width: 50px;
          height: 50px;
        }

        &.small-img {
          width: 20px;
          height: 20px;
        }

        &.__ani {
          animation: alarm 1s infinite;
        }
      }
    }

    .board-header-btn {
      .__header-btn {
        width: 20px;
        height: 20px;
        margin-top: 12px;
        opacity: 0.8;

        &:hover {
          opacity: 1;
        }
      }
    }

    .board-header-time {
      margin: 10px 20px 0 45px;
      color: #FFF;
      font-size: 14px;
      line-height: 18px;
      text-align: right;
    }
  }

  .board-content {
    height: calc(100% - 82px);
    padding: 12px;
    padding-top: 5px;
    padding-bottom: 10px;
    position: relative;
  }
}
</style>
